<template>
  <div class="capital">
    <!-- 标题 -->
    <el-row class="header">
      <el-col :span="2" class="headerImg">
        <img src="../assets/left.png" alt />
      </el-col>
      <el-col :span="22" class="headerTitle">{{title}}</el-col>
    </el-row>
    <!-- 祖册 -->
    <el-row :gutter="20" class="register" style="margin:0">
      <el-col :span="18" :offset="3" class="registerList">
        <input type="text" placeholder="请输入姓名" id="name" v-model="name" />
      </el-col>
      <el-col :span="18" :offset="3" class="registerList">
        <select name id>
          <option value="0">男</option>
          <option value="1">女</option>
        </select>
      </el-col>
      <el-col :span="18" :offset="3" class="registerList">
        <input
          type="tel"
          placeholder="请输入手机号"
          maxlength="11"
          class="tel"
          id="tel"
          v-model="mobile"
          value="mobile"
        />
        <span class="getcode" v-on:click="getcode()">{{codes}}</span>
      </el-col>
      <el-col :span="18" :offset="3" class="registerList">
        <input type="number" placeholder="请输入验证码" maxlength="8" />
      </el-col>

      <el-col :span="18" :offset="3" class="registerList">
        <input type="password" placeholder="请输入登录密码" id="password" v-model="password" />
      </el-col>
      <el-col :span="18" :offset="3" class="registerList">
        <input type="password" placeholder="请确认密码" />
      </el-col>
      <el-col :span="18" :offset="3" class="registerList submit">
        <input type="submit" placeholder="提交" @click="reg()" />
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { Toast } from "mint-ui";
export default {
  name: "register",
  data() {
    return {
      title: "已有账号，返回登录",
      codes: "获取验证码",
      name: "",
      mobile: "",
      password: "",
      url: domain.testUrl
    };
  },
  methods: {
    getcode: function() {
      let that = this;
      setInterval(function(num) {
        that.codes = 60 - 1;
      }, 1000);
    },
    reg: function() {
      if (this.name == "" || this.tel == "" || this.password == "") {
        Toast({
          message: "请补全资料后重新提交！",
          duration: 1600
        });
      } else {
        this.$axios({
          method: "post",
          url: this.url + "/user/reg",
          params: {
            name: this.name,
            mobile: this.mobile,
            password: this.password
          }
        }).then(res => {
          console.log(res.data);
          if (res.data.status == "ok") {
            Toast({
              message: "正在跳转中，请耐心等待！",
              duration: 1600
            });
            this.$router.push({
              path: "/login",
              query: {
                mobile: this.mobile,
                password: this.password
              }
            });
          } else {
            alert(res.data.errormsg);
          }
        });
      }
    }
  }
};
</script>


<style lang="less" scoped>
* {
  font-size: 0.14rem;
}
.capital {
  background: #f8f8f8;
}
.header {
  background: #ffffff;
  height: 0.8rem;
  overflow: hidden;
  border-bottom: 1px solid #f8f8f8;
  .headerImg {
    height: 0.8rem;
    img {
      width: 0.3rem;
      height: 0.5rem;
      overflow: hidden;
      margin-top: 0.15rem;
      float: right;
    }
    // background: red;
  }
  .headerTitle {
    font-size: 0.26rem;
    line-height: 0.8rem;
    text-align: center;
    font-weight: 600;
  }
}
.register {
  background: white;
  .registerList {
    height: 0.8rem;
    margin-top: 0.2rem;
    background: #f2f6f8;
    border-radius: 0.4rem;
    overflow: hidden;
    border: 1px solid #d4d4d5;
    input {
      width: 100%;
      height: 100%;
      background: #f2f6f8;
      border: none;
      font-size: 0.23rem;
      text-indent: 0.2rem;
      border-radius: 0.4rem;
      overflow: hidden;
    }
    .tel {
      width: 70%;
    }
    .getcode {
      width: 30%;
      text-align: center;
      color: red;
    }

    select {
      width: 100%;
      height: 0.8rem;
      text-indent: 0.2rem;
      background: #f2f6f8;
      text-align: center;
      border: none;
      option {
        width: 100%;
        height: 100%;
        text-align: center;
      }
    }
  }
  .submit {
    background: red;
    margin-top: 2rem;
    input {
      background: red;
      color: #ffffff;
    }
  }
}
</style>